<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>

    <%@include file="../system/head.jsp"%>
    <title>设置-个人信息</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/pages-seckillOrder.css" />
    <!-- 将百度地图API引入，设置好自己的key -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7Cc5Kmn672miPzG4qQhvlOrERcXMMinq"></script>
</head>

<body>
<!-- 头部栏位 -->
<!--页面顶部-->
<%@include file="../system/header.jsp"%>
<!--页面顶部结束-->
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/plugins/jquery/jquery.min.js"></script>
<script>
    $(function () {
        var username = '${Username}';
        if(username === ''){
            $("#showUsername").html("请<a href=\"${pageContext.request.contextPath}/system/login\">登录</a>\n" +
                "                            <span><a href=\"${pageContext.request.contextPath}/system/register\">免费注册</a></span>")
        }else{
            $("#showUsername").html(""+username+" <a href='${pageContext.request.contextPath}/login/logout'>退出登录</a>");
        }
    });
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#service").hover(function(){
            $(".service").show();
        },function(){
            $(".service").hide();
        });
        $("#shopcar").hover(function(){
            $("#shopcarlist").show();
        },function(){
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/plugins/jquery-placeholder/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/widget/nav.js"></script>
</body>
<!--header-->
<div id="account">
    <div class="py-container">
        <div class="yui3-g home">
            <!--左侧列表-->
            <!--左侧列表-->
            <div class="yui3-u-1-6 list">
                <div class="list-items">
                    <dl>
                        <dt><i>·</i> 订单中心</dt>
                        <dd ><a href="${pageContext.request.contextPath}/system/toHome?username=${Username}&currentPage=1">我的订单</a></dd>
                        <dd><a href="${pageContext.request.contextPath}/system/toOrderList?username=${Username}&order_status=0&currentPage=1" >待付款</a></dd>
                        <dd><a href="${pageContext.request.contextPath}/system/toOrderList?username=${Username}&order_status=1&currentPage=1"  >待发货</a></dd>
                        <dd><a href="${pageContext.request.contextPath}/system/toOrderList?username=${Username}&order_status=2&currentPage=1" >待收货</a></dd>
                    </dl>
                    <dl>
                        <dt><i>·</i> 我的中心</dt>
                        <dd><a href="${pageContext.request.contextPath}/goods/toCollect?username=${Username}&currentPage=1">我的收藏</a></dd>
                    </dl>
                    <dl>
                        <dt><i>·</i> 设置</dt>
                        <dd><a href="${pageContext.request.contextPath}/system/toAddress?username=${Username}"  >地址管理</a></dd>                    </dl>
                </div>
            </div>
            <!--右侧主内容-->
            <div class="yui3-u-5-6">
                <div class="body userAddress">
                    <div class="address-title">
                        <span class="title">地址管理</span>
                        <a  data-toggle="modal" data-target=".edit" data-keyboard="false"   class="sui-btn  btn-info add-new">添加/修改地址</a>
                        <span class="clearfix"></span>
                    </div>
                    <div class="address-detail">
                        <table class="sui-table table-bordered">
                            <thead>
                            <tr>
                                <th>姓名</th>
                                <th>地址</th>
                                <th>联系电话</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>${address.realName}</td>
                                <td>${address.address}</td>
                                <td>${address.phone}</td>
                                <td>默认地址</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--新增地址弹出层-->
                    <div  tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal modal-body  fade edit" style="width: 1px;height: 1px">
                        <div class="modal-dialog" >
                            <div class="modal-content" >
                                <div class="modal-header">
                                    <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
                                    <h4 id="myModalLabel" class="modal-title">添加/修改地址</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="sui-form form-horizontal" id="form" autocomplete="off">
                                        <%--隐藏域提交用户名--%>
                                        <input type="hidden" value=${Username} name="username">
                                        <div class="control-group">
                                            <label class="control-label">收货人：</label>
                                            <div class="controls">
                                                <input type="text" class="input-medium" name="realName" value="${address.realName}">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">联系电话：</label>
                                            <div class="controls">
                                                <input type="text" class="input-medium" name="phone" value="${address.phone}">
                                            </div>
                                        </div>
                                            <div class="control-group">
                                                <label class="control-label">详细地址：</label>
                                                <div class="controls">
                                                    <input id="address" type="text" class="input-large" name="address" value="${address.address}" style="width: 300px">
                                                    <button type="button" id="open">
                                                        点击显示地图获取地址
                                                    </button>
                                                </div>
                                            </div>
                                    </form>
<%--                                    <label>地址 ：</label>--%>
<%--                                    <input type="text" id="aaddress" readonly>--%>
<%--                                    <button type="button" id="open">--%>
<%--                                        点击显示地图获取地址--%>
<%--                                    </button>--%>
                                    <div id='allmap' style='width: 90%; height: 100%; position: absolute; display: none'></div>
                                    <script type="text/javascript">
                                        document.getElementById('open').onclick = function () {
                                            if (document.getElementById('allmap').style.display == 'none') {
                                                document.getElementById('allmap').style.display = 'block';
                                            } else {
                                                document.getElementById('allmap').style.display = 'none';
                                            }
                                        }

                                        var map = new BMap.Map("allmap");
                                        var geoc = new BMap.Geocoder();   //地址解析对象
                                        var markersArray = [];
                                        var geolocation = new BMap.Geolocation();


                                        var point = new BMap.Point(116.404412, 39.914714);
                                        map.centerAndZoom(point, 12); // 中心点
                                        geolocation.getCurrentPosition(function (r) {
                                            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                                                var mk = new BMap.Marker(r.point);
                                                map.addOverlay(mk);
                                                map.panTo(r.point);
                                                map.enableScrollWheelZoom(true);
                                            }
                                            else {
                                                alert('failed' + this.getStatus());
                                            }
                                        }, {enableHighAccuracy: true})
                                        map.addEventListener("click", showInfo);


                                        //清除标识
                                        function clearOverlays() {
                                            if (markersArray) {
                                                for (i in markersArray) {
                                                    map.removeOverlay(markersArray[i])
                                                }
                                            }
                                        }
                                        //地图上标注
                                        function addMarker(point) {
                                            var marker = new BMap.Marker(point);
                                            markersArray.push(marker);
                                            clearOverlays();
                                            map.addOverlay(marker);
                                        }
                                        //点击地图时间处理
                                        function showInfo(e) {
                                            <!--document.getElementById('lng').value = e.point.lng;-->
                                            <!--document.getElementById('lat').value =  e.point.lat;-->
                                            geoc.getLocation(e.point, function (rs) {
                                                var addComp = rs.addressComponents;
                                                var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                                                if (confirm("确定要地址是" + address + "?")) {
                                                    document.getElementById('allmap').style.display = 'none';
                                                    document.getElementById('address').value = address;
                                                }
                                            });
                                            addMarker(e.point);
                                        }
                                    </script>
                                </div>
                                <div class="modal-footer">
                                    <button id="save" type="button" data-ok="modal" class="sui-btn btn-primary btn-large">确定</button>
                                    <button type="button" data-dismiss="modal" class="sui-btn btn-default btn-large">取消</button>
                                </div>

                            </div>

                        </div>

                    </div>

                    <script>
                        $(function () {
                            $("#save").click(function () {
                                $.ajax({
                                    url:'${pageContext.request.contextPath}/goods/saveAddress',
                                    data:$("#form").serialize(),
                                    type:'GET',
                                    contentType:'application/json;charset=utf-8',
                                    dataType:'json',
                                    success:function (res) {
                                        if(res.type === 'success'){
                                            location.reload();
                                        }else{

                                        }
                                    }
                                })
                            })
                        })
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 底部栏位 -->
<!--页面底部-->
<%@include file="../system/Footer.jsp"%>
<!--页面底部END-->


</html>